/**
 * Created by Quanta on 2017/5/24.
 */
import React from 'react';
import Media from 'react-bootstrap/lib/Media';
import Grid from "react-bootstrap/lib/Grid";
import Row from "react-bootstrap/lib/Row";
import Col from "react-bootstrap/lib/Col";
import Form from "react-bootstrap/lib/Form";
import FormGroup from "react-bootstrap/lib/FormGroup";
import ControlLabel from "react-bootstrap/lib/ControlLabel";
import FormControl from "react-bootstrap/lib/FormControl";
import Button from "react-bootstrap/lib/Button";
import Glyphicon from "react-bootstrap/lib/Glyphicon";


class MediaZone extends React.Component {
    render(){
        return (
            <Grid style={{paddingTop:'20px'}}>
                <Row className="show-grid" style={{marginTop:'10px'}}>
                    <Col lg={2} xs={2} md={2} sm={0} smHidden></Col>
                    <Col lg={8} xs={8} md={8} sm={12}>
                        <Form inline>
                            <FormGroup controlId="formControlsEmail" style={{width:'45%'}}>
                                <ControlLabel>邮箱</ControlLabel>{'  '}
                                <FormControl type="email" placeholder="请输入您的邮箱" style={{minWidth:'250px'}} />
                            </FormGroup>
                            <FormGroup controlId="formControlsNickname" style={{width:'45%'}}>
                                <ControlLabel>昵称</ControlLabel>{'  '}
                                <FormControl type="text" placeholder="请输入您的昵称" style={{minWidth:'250px'}} />
                            </FormGroup>
                            <br /><br />
                            <FormGroup controlId="formControlsTextarea" style={{width:'90%'}}>
                                <ControlLabel>回复</ControlLabel>{'  '}
                                <FormControl componentClass="textarea" placeholder="回复内容" style={{minWidth:'500px'}} />
                                <Button bsStyle="primary" style={{marginLeft:'10px'}}>回复&nbsp;<Glyphicon glyph="glyphicon glyphicon-send" /></Button>
                            </FormGroup>

                        </Form>
                    </Col>
                    <Col lg={2} xs={2} md={2} sm={0} smHidden></Col>
                </Row>
                <Row className="show-grid" style={{marginTop:'20px'}}>
                    <Col lg={1} xs={1} md={1} sm={0} smHidden></Col>
                    <Col lg={10} xs={10} md={10} sm={12} style={{padding:'20px'}}>
                        <div style={{fontSize:'30px',fontWeight:'bolder',textAlign:'center',color:'crimson',borderBottom:'2px dashed crimson'}}> 评论区 </div>
                        <Media style={{margin:'10px'}}>
                            <Media.Body>
                                <Media.Heading>Media Heading</Media.Heading>
                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                                <Media>
                                    <Media.Body>
                                        <Media.Heading>Nested Media Heading</Media.Heading>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                                    </Media.Body>
                                </Media>
                            </Media.Body>
                        </Media>
                    </Col>
                    <Col lg={1} xs={1} md={1} sm={0} smHidden></Col>
                </Row>
            </Grid>
        )
    }
}

export default MediaZone;